<template>
  <div
    class="index"
    id="zll-index"
  >
    <!--@mousemove.prevent="handleMousemove"
    @mouseup.prevent="handleMouseup"-->
    <div class="flow-menu">
      <div class="header-attr">
        <h3>{{flowTitle}}</h3>
      </div>
      <div class="section">
        <el-scrollbar>
            <FlowMenu @on-is-add-node="onIsAddNode" />
        </el-scrollbar>
      </div>
    </div>

    <div class="middle">
      <header>
        <HeaderOperate ref="operate" />
      </header>
      <div class="section">
        <FlowContent ref="flowContent" @on-select-type="onSelectType" />
      </div>
    </div>

    <div class="flow-attr">
      <header>
        <header-attr />
      </header>
      <el-scrollbar>
        <flow-attr />
      </el-scrollbar>
    </div>

    <div class="modal-warp">
      <Modal
        v-model="isJsonView"
        footer-hide
        title="FlowData数据"
        width="600"
        :transfer="false"
        @on-cancel="handleCloseJsonView"
      >
        <json-viewer :expand-depth="1" copyable boxed :value="jsonData"></json-viewer>
      </Modal>
    </div>

  </div>
</template>

<script>
import jsp from "jsplumb";
import HeaderOperate from "./modules/HeaderOperate";
import HeaderAttr from "./modules/HeaderAttr";
import FlowMenu from "./FlowMenu";
import FlowAttr from "./FlowAttr";
import FlowContent from "./FlowContent";
import {selectById, updateApi} from '@/views/flow/taskflow/task/api'

export default {
  name: "TaskFlowDesigner",
  components: {
    HeaderOperate,
    HeaderAttr,
    FlowMenu,
    FlowContent,
    FlowAttr,
  },
  data() {
    return {
      isMouseDownStop: false,
      isJsonView: false,
      jsonData: "暂无内容",
    };
  },
  computed: {
    flowMenuObj() {
      return this.$store.state.taskflow.flowMenuObj;
    },
    flowTitle() {
      return this.$store.state.taskflow.task.name;
    },
    taskId() {
      return this.$route.query.id;
    }
  },

  watch: {
    flowMenuObj(newVal, oldVal) {
      if (newVal.type === "view-code") {
        this.jsonData = this.$store.state.taskflow.flowData;
        this.isJsonView = true;
      }
    },
    taskId:{
      async handler(nVal) {
        if (!nVal)  return ;
        await this.$store.commit("taskflow/setParamTaskId", nVal);
        await this.initTask();
        // this.jsonData = this.$store.state.taskflow.flowData;
      },
      immediate: true
    }
  },
  created() {
    this.$store.commit("taskflow/setJspInit", jsp.jsPlumb.getInstance({ Container: "zll-index" }));
  },
  mounted() {
    this.initTask();
  },
  methods: {
    async initTask() {
      if (this.$store.state.taskflow.paramTaskId==undefined) return;
      const task = {}
      task.id=this.$store.state.taskflow.paramTaskId
      const r = await selectById(task)
      if (!r.success) {
        this.$Modal.success({
          title: "操作提示",
          content: r.content,
        });
        return
      }
      const flowDataStr = r.obj.flowData
      this.$store.commit("taskflow/setTask", r.obj);
      if (flowDataStr) {
        this.$store.commit("taskflow/setFlowData", JSON.parse(flowDataStr));
      }
      this.$refs.flowContent.initFlowData()
    },
    onIsAddNode() {
      this.$refs.flowContent.onIsAddNode();
    },
    onSelectType(type) {
      this.$refs.operate.handleMiddleMenu(type);
    },
    handleCloseJsonView() {
      //  this.jsonData = this.$store.state.taskflow.flowData;
    },
    handleMouseup(e) {
      this.isMouseDownStop = false;
    },
    handleMousemove(e) {
      if (this.isMouseDownStop) {
        this.flowAttrVerticalWidth =
          this.flowAttrVerticalWidthDown + this.mouseDownOffset - e.x;
        if (this.flowAttrVerticalWidth < 450) {
          this.flowAttrVerticalWidth = 450;
        }
        if (this.flowAttrVerticalWidth > 1200) {
          this.flowAttrVerticalWidth = 1200;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.header-attr {
  width: 100%;
  background-color: #FFFFFF;
  h3 {
   text-align: center;
   height: 37px;
   line-height: 37px;
  }
}
.index {
  display: flex;
  h1 {
    font-size: 18px;
  }
  > div {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .section {
    flex: 1;
  }
  header {
    height: 38px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
  }
  .flow-menu {
    width: 250px;
    background-color: #eef1f6;
    overflow-x: hidden;
  }
  .middle {
    flex: 1;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
  }
  .flow-attr {
    width: 350px;
  }
  /deep/ .ivu-modal {
    margin-bottom: 50px;
    .jv-container.boxed:hover {
      box-shadow: none;
      border: 1px solid #eee;
      border-radius: 6px;
    }
  }
}
</style>
